<script lang="ts" setup>
import { h } from "vue";
import EnumTag from "@/components/common/EnumTag.vue";

import ApiMerchant from "@/api/merchant";
import useProTable from "@/hooks/useProTable";
import { useRoute } from "vue-router";
import {
  ElAvatar,
  ElButton,
  ElInput,
  ElLink,
  ElMessage,
  ElRadio,
  ElRadioGroup,
} from "element-plus";
import Icon from "@/components/Icon.vue";
import useRequest from "@/hooks/useRequest";
import useDelete from "@/hooks/useDelete";
import { EnumStaffStatus, EnumStaffType } from "@/utils/enum";
import useModal from "@/hooks/useModal";
import ModifyStafff from "./components/ModifyStafff.vue";
import ProSelect from "@/modules/package/form/components/ProSelect.vue";

const { params } = useRoute();
const merchant_id = +params.id;

const [ProTable, { tableApi }] = useProTable({
  fetchUrl: ApiMerchant.getMerchantStaffList,
  fetchOptions: {
    defaultSearch: { merchant_id },
  },
  tableOptions: {
    columns: [
      { label: "序号", type: "index", width: 80 },
      {
        label: "头像",
        width: 100,
        slot: ({ row }: any) => h(ElAvatar, { src: row.user_avatar }),
      },
      // { label: "用户昵称", width: 130, prop: "user_nickname" },
      { label: "职员姓名", prop: "staff_name" },
      { label: "电话", prop: "mobile" },
      {
        label: "类型",
        slot: ({ row }: any) =>
          h(EnumTag, { options: EnumStaffType, value: row.staff_type }),
      },
      {
        label: "在职状态",
        slot: "status",
      },
      { label: "创建日期", prop: "create_time" },
      { label: "更新时间", prop: "update_time" },
      {
        label: "操作",
        width: 120,
        slot: ({ row }: any) => [
          h(
            ElButton,
            { link: true, type: "primary", onClick: () => modalApi.open(row) },
            "编辑"
          ),
          h(
            ElButton,
            { link: true, type: "danger", onClick: () => del(row) },
            "删除"
          ),
        ],
      },
    ],
  },

  formOptions: {
    formItems: [
      {
        label: "职工姓名",
        children: {
          type: ElInput,
          field: "staff_name",
          placeholder: "请输入",
        },
      },
      {
        label: "联系电话",
        children: { type: ElInput, field: "mobile", placeholder: "请输入" },
      },
      {
        label: "在职状态",
        children: {
          type: ProSelect,
          field: "status",
          props: { options: EnumStaffStatus },
        },
      },
      {
        label: "身份类型",
        children: {
          type: ProSelect,
          field: "staff_type",
          props: { options: EnumStaffType },
        },
      },
    ],
  },
});

// 删除
const { del } = useDelete(ApiMerchant.deleteMerchantStaff, {
  refresh: tableApi.refresh,
});

// 更新操作
const { run, onFetchResponse } = useRequest(
  ApiMerchant.updateMerchantStaffStatus,
  { immediate: false }
);

onFetchResponse(() => ElMessage.success("更新成功"));

const [Modal, modalApi] = useModal({
  width: 500,
  title: "编辑职工信息",
});
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton type="primary" @click="modalApi.open({ merchant_id })"
        >新增职工
      </ElButton>
    </template>

    <template #tool-right>
      <ElLink type="primary" :href="`/merchant/${merchant_id}`"
        >商户详情>
      </ElLink>
    </template>

    <template #table-status="{ row }">
      <el-popover placement="top" :width="320" trigger="hover" title="更新状态">
        <template #reference>
          <div class="inline-flex items-center">
            <EnumTag :options="EnumStaffStatus" :value="row.status" />
            <Icon name="CaretBottom" />
          </div>
        </template>

        <ElRadioGroup v-model="row.status" @change="run(row)">
          <ElRadio
            v-for="item in EnumStaffStatus"
            :key="item.value"
            :value="item.value"
            border
            >{{ item.label }}
          </ElRadio>
        </ElRadioGroup>
      </el-popover>
    </template>
  </ProTable>

  <Modal>
    <ModifyStafff @success="tableApi.refresh" />
  </Modal>
</template>
